<template>
  <div>
    <div class="popular-title">本周流行</div>
    <div class="popular-box">
      <div class="popular-item" v-for="(item,index) of populars" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="">
          <div class="popular-item-title">{{item.title}}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        populars: [{
          image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2212902162,2770250402&fm=15&gp=0.jpg",
          title: "霸街长袖裙",
          link: "#"
        }, {
          image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=227186325,2525781114&fm=15&gp=0.jpg",
          title: "时尚懒人套装",
          link: "#"
        }, {
          image: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=126202903,2736762022&fm=15&gp=0.jpg",
          title: "微胖遮肉穿搭",
          link: "#"
        }, {
          image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603398132,3640443950&fm=26&gp=0.jpg",
          title: "降温保暖鞋",
          link: "#"
        }, {
          image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2212902162,2770250402&fm=15&gp=0.jpg",
          title: "颜值报表套装",
          link: "#"
        }, {
          image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=227186325,2525781114&fm=15&gp=0.jpg",
          title: "小心机V领",
          link: "#"
        }, {
          image: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=126202903,2736762022&fm=15&gp=0.jpg",
          title: "万圣节必备",
          link: "#"
        }, {
          image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603398132,3640443950&fm=26&gp=0.jpg",
          title: "软萌暖心包包",
          link: "#"
        }],
        split: 4
      }
    }
  }
</script>

<style>
  .popular-title {
    text-align: center;
    padding: 8px;
    font-weight: bold;
  }

  .popular-box {
    display: flex;
    flex-wrap: wrap;
  }

  .popular-item {
    width: 25%;
  }

  .popular-item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
  }

  .popular-item img {
    width: 80%;
    border-radius: 50%;
  }

  .popular-item-title {
    font-size: 12px;
    margin-top: 8px;
  }
</style>
